<template>
    <div class="home-page">
        <back :back="false" title="个人中心" style="position:relative"></back>
        <div class="home-info">
            <div class="home-inbox">
                <div class="avatar"><i class="iconfont icon-morentouxiang"></i></div>
                <div class="name" @click="$router.push('/edit')">
                    <div class="nickname">{{MyData.name}}</div>
                    <div class="phone">+{{MyData.phone}}</div>
                </div>
                <i class="iconfont icon-you- right"></i>
            </div>
        </div>
        <div class="home-scroll-title">
            <i class="iconfont icon-shengyin"></i>
            <div class="scroll_box" id="scroll_div">
                <ul class="music-intro" id="scroll_begin">
                    <li v-for="(it,i) in Notice" :key="i">{{it}}</li>
                </ul>
                <ul class="music-intro" id="scroll_end"></ul>
            </div>
        </div>
        <div class="home-menu">
            <div class="menu-item"><router-link class="link" to="/balance"><i class="iconfont icon-yue1"></i>余额</router-link><i class="iconfont icon-you-"></i></div>
            <div class="menu-item"><router-link class="link" to="/bill"><i class="iconfont icon-xingzhuang"></i>账单</router-link><i class="iconfont icon-you-"></i></div>
            <div class="menu-item"><router-link class="link" to="/card"><i class="iconfont icon-qiajuan"></i>我的卡券</router-link><i class="iconfont icon-you-"></i></div>
            <div class="menu-item"><router-link class="link" to="/invitation"><i class="iconfont icon-youli"></i>邀请有礼</router-link><i class="iconfont icon-you-"></i></div>
            <div class="menu-item"><router-link class="link" to="/bindcode"><i class="iconfont icon-yaoqingmatianchong"></i>绑定邀请码</router-link><i class="iconfont icon-you-"></i></div>
			<div class="menu-item"><router-link class="link" to="/security"><i class="iconfont icon-mima"></i>安全中心</router-link><i class="iconfont icon-you-"></i></div>
            <div class="menu-item"><router-link class="link" to="/service"><i class="iconfont icon-kefu-copy"></i>我的客服</router-link><i class="iconfont icon-you-"></i></div>
            <div class="menu-item"><router-link class="link" to="/about"><i class="iconfont icon-guanyuwomen"></i>关于我们</router-link><i class="iconfont icon-you-"></i></div>
			<div class="menu-item"><a @click="clearFn" class="link"><i class="iconfont icon-qingchu"></i>清除缓存</a><i class="iconfont icon-you-"></i></div>
        </div>
        <div class="home-exit">
            <button type="button" @click="exit"><i class="iconfont icon-tuichu"></i>注销登录</button>
        </div>
    </div>
</template>

<style lang="stylus">
.home-page{
    width 100%
    height calc(100% - 50px) !important
    overflow-y auto
    background #f1f1f1
    .home-info{
        width 100%
        padding 40px 0
        background: #3d81cb
        .home-title{
            text-align center
            font-size 18px
            color #fff
            padding 20px 0
        }
        .home-inbox{
            display flex
            align-items center
            padding 0 15px
            color #fff
            position relative
            .iconfont{
                font-size 20px
                &.right{
                    position absolute
                    top 25px
                    right 10px
                }
            }
            .avatar{
                width 70px
                height 70px
                line-height 70px
                i{
                    font-size 60px
                    color #fff
                }
            }
            .name{
                color #fff
                flex 1
                .nickname{
                    font-size 18px
                    margin-bottom 10px
                }
                .phone{
                    font-size 14px
                }
            }
        }
    }
    .home-scroll-title{
        background #fcf8ec
        color #d69800
        font-size 12px
        width 100%
		height:30px;
        display flex
		align-items:center;
        position relative
        .iconfont{
            width 20px
            line-height 25px
            background #fcf8ec
        }
        .scroll_box{
            width: calc(100% - 20px);
			height:30px;
            overflow hidden
            display flex
            align-items center
        }
        ul{
            list-style none 
			height:100%;
			display:flex;
			align-items:center;
            li{
                white-space nowrap
                padding 0 10px
                line-height 25px
                min-width 355px
            }
        }
    }
    .home-tab-nav{
        display flex
        padding 10px 0
        border-bottom 10px solid #f4f5fa
        .nav-item{
            flex 1
            text-align center
            .link{
                color #333
                font-size 14px
                text-decoration none 
                i{
                    display block
                    font-size 30px
                }
            }
        }
    }
    .home-menu{
        padding 0 10px
        margin-top 10px
        background #fff
        .menu-item{
            height 50px
            line-height 50px
            border-bottom 1px solid #f4f5fa
            display flex
            align-items center
            color #ddd
            font-size 12px
            .link{
                color #333
                font-size 14px
                display flex
                align-items center
                flex 1
                i{
                    font-size 24px
                    color #3563db
                    margin-right 10px
                }
            }
            &:nth-child(2n){
                .link{
                    i{
                        color #e25b58
                    }
                }
            }
        }
    }
    .home-exit{
        height 50px
        line-height 50px
        padding 0 10px
        display flex
        align-items center
        background #fff
        margin-top 10px
        button{
            color #333
            font-size 16px
            display flex
            align-items center
            flex 1
            i{
                font-size 24px
                color #db3535
                margin-right 10px
            }
        }
    }
}
</style>


<script>
export default {
    data(){
        return {
            MyData:'',
            MyMar:null,
            Notice:''
        }
    },
    created(){
        this.MyInfo();
        this.getNotice()
    },
    mounted(){

    },
    methods:{
		clearFn(){
			this.$createDialog({
                type: 'confirm',
                icon: 'cubeic-alert',
                title: '清除缓存',
                content: '清除缓存后将清理掉浏览信息',
                confirmBtn: {
                    text: '确定',
                    active: true,
                    disabled: false,
                    href: 'javascript:;'
                },
                cancelBtn: {
                    text: '取消',
                    active: false,
                    disabled: false,
                    href: 'javascript:;'
                },
                onConfirm: () => {
                    localStorage.removeItem('notice')
					this.$createToast({
						time: 1500,
						txt: '清理缓存中...'
					}).show()
					setTimeout( () => {
						window.location.href="/my";
					},1500)
                    
                },
                onCancel: () => {

                }
            }).show()
		},
        MyInfo(){
            this.$http.get(`MyInfo/index`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.MyData = res.data
                }
            })
        },
        ScrollImgLeft(){
            let speed=50;//初始化速度 也就是字体的整体滚动速度
            // let MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容
            let scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头id
            let scroll_end = document.getElementById("scroll_end");//获取滚动的结束id
            let scroll_div = document.getElementById("scroll_div");//获取整体的开头id
            scroll_end.innerHTML=scroll_begin.innerHTML;//滚动的是html内部的内容,原生知识!
            function Marquee(){
                if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
                    scroll_div.scrollLeft-=scroll_begin.offsetWidth;
                else
                    scroll_div.scrollLeft++;
            }
            
            clearInterval(this.MyMar)
            this.MyMar=setInterval(Marquee,speed);//给上面的方法设置时间  setInterval
        },
        exit(){
            this.$http.get(`/MyInfo/logout`).then(res => {
                console.log(res)
                if(res.code == 200){
                    this.$router.push('/login')
                }
            })
        },
        getNotice(){
            this.$http.get(`/About/getNotice`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.Notice = res.data.concent
                    setTimeout( () => {
                        this.ScrollImgLeft();
                    },100)
                }
            })
        }
    },
    beforeDestroy(){
        clearInterval(this.MyMar)
    }
}
</script>
